<template>
	<view class="login-view">
		<u-navbar
			bgColor="#ededed"
			leftIcon="close"
			:placeholder="true"
			:titleStyle="{
				fontWeight:700
			}">
		</u-navbar>
		<view class="login-view__content">
			<view class="content-title">微信号/QQ号/邮箱登录</view>
			<u--form
				ref="uForm"
				:model="form"
				:rules="rules"
				errorType="toast"
				label-width="100px">
				<u-form-item
					label="账号"
					prop="username"
					borderBottom>
					<u--input
						v-model="form.username"
						placeholder="请填写微信号/QQ号/邮箱"
						border="none" />
				</u-form-item>
				<u-form-item
					label="密码"
					prop="password"
					borderBottom>
					<u--input
						type="password"
						v-model="form.password"
						placeholder="请填写密码"
						border="none">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="login-view__action">
			<view>上述微信号/QQ号/邮箱仅用户登录验证</view>
			<u-button
				text="同意并登录"
				color="#07c160"
				@click="handleLogin"
				:custom-style="{
					width: '320rpx',
				}">
			</u-button>
			<!-- <u-button
				text="同意并登录"
				:color="form.username !== '' && form.password !== '' ? '#07c160' : '#e1e1e1'"
				:disabled="form.username == '' || form.password == ''"
				@click="handleLogin"
				:custom-style="{
					width: '320rpx',
					color: form.username !== '' && form.password !== '' ? '#ffffff' : '#b8b8b8'
				}">
			</u-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					key: '',
					captcha: '520'
				},
				rules: {
					username: [
						{
							required: true,
							message: '请填写微信号/QQ号/邮箱'
						}
					],
					password: [
						{
							required: true,
							message: '请填写密码'
						}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			handleLogin() {
				this.$refs.uForm.validate().then(res => {
					// 登录操作
					uni.showLoading({
						title: "登录中"
					})
					uni.request({
					    url: 'http://241121-0011.demo.boywe.cn/login/login',
						method: 'POST',
						data: this.form,
					    complete: (res) => {
							uni.hideLoading()
					        var result = res.data
							if (result.success) {
								uni.setStorageSync('Authorization', result.data.access_token)
								uni.switchTab({
									url: '/pages/message/message'
								})
							}
					    }
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efefef;
	}
	.login-view {
		&__content {
			padding: 0 30rpx;
			.content-title {
				text-align: center;
				font-size: 38rpx;
				padding: 80rpx 0;
			}
		}
		&__action {
			position: fixed;
			bottom: 170rpx;
			width: 100%;
			text-align: center;
			view {
				color: #aaaaaa;
				font-size: 24rpx;
				margin-bottom: 40rpx;
			}
		}
	}
</style>